<template>
  <div class="about">
    <!-- 头部 -->
    <AppHeader center="许愿墙"></AppHeader>
    <!-- input 组件 添加愿望 -->
    <MyInput :focus="focus" v-model="wish" @enter="enter"></MyInput>
    <!-- 图片选择 -->
    <SelectImg
      :indexFlag="indexFlag"
      @handleImg="handleImg"
      :imgPath="imgPath"
    ></SelectImg>
    <!-- 图片选择 -->
    <button
      v-if="editFlag"
      :disabled="wishDisabled"
      class="wish"
      @click="handelWish"
    >
      <span v-if="wishDisabled">再想想</span>
      <span v-else>许愿</span>
    </button>
    <button v-else class="wish blue" @click="textEdit">编辑</button>
    <div id="content">
      <div
        class="WishCard"
        v-drag
        v-for="(item, index) in $store.state.wishData"
        ref="WishCard"
        :key="index"
        @click="edit(item)"
        :style="`left:${left}px;top:${top}px;`"
      >
        <img :src="item.img" alt="" />
        <p>{{ item.wish }}</p>
        <b @click.stop="$store.commit('remove', index)">X</b>
      </div>
    </div>
  </div>
</template>

<script>
import MyInput from "../components/myInput.vue";
import AppHeader from "../components/appHeader.vue";
import SelectImg from "../components/selectImg.vue";
export default {
  data() {
    return {
      wish: "",
      indexFlag: -1, // 选中的状态
      //   使用require()包裹路径，网络路径就不需要这样直接渲染即可
      //   imgPath: ["img1.jpg", "img2.jpg", "img3.jpg", "img4.jpg", "img5.jpg"],
      imgPath: [
        {
          img: require("../assets/images/img1.jpg"),
          index: 0,
        },
        {
          img: require("../assets/images/img2.jpg"),
          index: 1,
        },
        {
          img: require("../assets/images/img3.jpg"),
          index: 2,
        },
        {
          img: require("../assets/images/img4.jpg"),
          index: 3,
        },
        {
          img: require("../assets/images/img5.jpg"),
          index: 4,
        },
      ],
      img: "",
      wishDisabled: true, // 许愿按钮禁用
      left: 0,
      top: 0,
      focus: false, // 获取焦点
      imgIdFlag: -1, // 编辑点击的id
      editFlag: true, // 编辑按钮的切换

      eleIndex: 0, // 第几个元素
    };
  },
  directives: {
    drag(el) {
      el.style.position = "absolute";
      let x = 0;
      let y = 0;
      el.ontouchstart = function(e) {
        x = e.touches[0].pageX - el.offsetLeft;
        y = e.touches[0].pageY - el.offsetTop;
        console.log(e.touches[0].pageX);
        el.ontouchmove = function(ee) {
          let left = ee.touches[0].pageX - x;
          let top = ee.touches[0].pageY - y;
          el.style.left = left + "px";
          el.style.top = top + "px";
        };
      };
      document.ontouchend = function(e) {
        el.ontouchmove = null;
      };
    },
  },
  mounted() {
    let obj = JSON.parse(localStorage.getItem("location")) || [];
    this.top = obj.top;
    this.left = obj.left;
  },
  watch: {
    indexFlag() {
      if (this.indexFlag != -1) {
        this.wishDisabled = false;
      } else {
        this.wishDisabled = true;
      }
    },
  },
  methods: {
    //   确认编辑
    textEdit() {
      console.log(this.id, this.wish, this.indexFlag);
      console.log(this.imgPath[this.indexFlag]);
      this.$store.commit("edit", {
        id: this.imgIdFlag,
        wish: this.wish,
        img: this.img,
        tapId: this.id,
      });
      console.log(this.id);
    },
    //   编辑
    edit(item) {
      this.wish = item.wish; // 重新返回数据

      this.indexFlag = item.id;

      this.imgIdFlag = item.id; // 记录当前点击的 id
      this.img = this.imgPath[item.id].img;
      this.focus = true;
      this.editFlag = false;
    },
    enter() {
      console.log(this.wish);
    },
    // 许愿按钮
    handelWish() {
      if (!this.wish) {
        alert("你还没有输入心愿");
        return;
      }

      this.top = Math.floor(
        // 获取可视的宽高
        Math.random() * document.documentElement.clientHeight - 200
      ); // 加 this.radius 保证图形中心在范围内，后面可少判断一步
      this.left = Math.floor(
        Math.random() * document.documentElement.clientWidth - 220
      );

      localStorage.setItem(
        "location",
        JSON.stringify({ top: this.top, left: this.left })
      );

      this.$store.commit("wishDataFn", {
        wish: this.wish,
        img: this.img,
        id: this.id,
      });
      console.log(this.wishData);
      this.wish = "";
      this.indexFlag = -1;
    },
    // select 图片事件
    handleImg(item) {
      this.img = item.img;
      this.id = item.index;
      if (this.indexFlag == item.index) {
        this.indexFlag = -1;
      } else {
        this.indexFlag = item.index;
      }
    },
  },
  components: { MyInput, AppHeader, SelectImg },
};
</script>

<style lang="scss">
.about {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.blue {
  background-color: rgb(23, 228, 194);
}
.wish {
  width: 100px;
  height: 40px;
  margin: auto;
  display: block;
}
.WishCard {
  width: 120px;
  height: 120px;
  border: 1px solid #000;
  position: absolute;
  color: rgb(118, 218, 25);
  padding: 20px;
  img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  b {
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 5px;
    line-height: 20px;
    text-align: center;
  }
}
</style>
